<!--
 * @Author: your name
 * @Date: 2022-01-03 18:11:16
 * @LastEditTime: 2022-01-18 16:28:46
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue\vue-douban-pc\src\views\pwUpdate.vue
-->
<template>
    <div class="pw-update">
        <div class="register-box box-bg">
            <h1>修改密码</h1>
            <div class="box">
                <label for="name">用户名 *</label>
                <el-input
                    v-model="username"
                    prefix-icon="el-icon-user-solid"
                    id="name"
                    placeholder="请输入用户名"
                    clearable
                ></el-input>
            </div>
            <div class="box">
                <label for="password">旧密码 *</label>
                <el-input
                    placeholder="请输入旧密码"
                    prefix-icon="el-icon-s-promotion"
                    id="password"
                    v-model="password"
                    show-password
                ></el-input>
            </div>
            <div class="box">
                <label for="newpassword">新密码 *</label>
                <el-input
                    placeholder="请输入新密码"
                    prefix-icon="el-icon-s-promotion"
                    id="newpassword"
                    v-model="newpassword"
                    show-password
                ></el-input>
            </div>
            <div class="box">
                <label for="newspassword">确认密码 *</label>
                <el-input
                    placeholder="请再次输入新密码"
                    prefix-icon="el-icon-s-promotion"
                    id="newspassword"
                    v-model="newspassword"
                    show-password
                ></el-input>
            </div>
            <div class="btn-box">
                <el-button type="primary" @click="pwUpdate">确认</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getUserInfo } from "../utils/auth";
export default {
    name: 'VuePwupdate',

    data() {
        return {
            username: "",
            password: "",
            newpassword: "",
            newspassword: "",
            userId: "",
        };
    },

    mounted() {
        
    },

    created() {
        this.userId = getUserInfo().users.user_id
    },

    methods: {
        pwUpdate(){
            console.log(this.username);
            console.log(this.userId);
            if(this.username.trim() == ""){
                this.$message.error('请填写用户名');
            }else if(this.password.trim() == ""){
                this.$message.error('请填写旧密码');
            }else if(this.newpassword.trim() == ""){
                this.$message.error('请填写新密码');
            }else if(this.newspassword.trim() == ""){
                this.$message.error('请填写确认密码');
            }else if(this.newpassword.trim() !== this.newspassword.trim()){
                this.$message.error('两次输入的密码不一致');
            }else if(this.password.trim() == this.newpassword.trim()){
                this.$message.error('新密码不能和旧密码相同');
            }else{
                this.axios.post("/pwUpdate",{
                    userId: this.userId,
                    username: this.username,
                    password: this.password,
                    newpassword: this.newpassword,
                }).then((res)=>{
                    let {state} = res.data.data
                    if(state == "success"){
                        this.$message.success('修改成功');
                        this.username = "",
                        this.password = "",
                        this.newpassword = "",
                        this.newspassword = ""
                    }else {
                        this.$message.error('修改失败,请确保用户名和密码输入正确');
                    }
                })
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.pw-update {
    position: absolute;
    top: 50%;
    right: 300px;
    transform: translate(-50%, -50%);
    z-index: 4;
    .register-box {
        padding: 10px;
        width: 400px;
        h1 {
            font-size: 25px;
            text-align: center;
            margin: 20px 0;
            color: #000;
        }
        label {
            color: #000;
        }
        .box {
            margin: 0 auto;
            width: 300px;
        }
        .forget {
            margin: 0 auto;
            width: 300px;
            text-align: right;
        }
        .btn-box {
            width: 100px;
            margin: 10px auto;
            .el-button {
                width: 100px;
            }
        }
        .register {
            text-align: center;
        }
    }
    .box-bg {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
    }
}
</style>